<template>
    <!-- 搜索页面 -->
    <div>
        <div class="top">
            <!-- v-model 实现数据双向绑定 -->
             <input class="top_inp" type="text" placeholder="搜索" v-model="inp">
             <button @click="serchCai">搜索</button>
        </div>
    <div class="erji">
       <!-- 点击切换class类名达到改变样式的需求 -->
        <div class="er_text" v-for="(item,index) in topnav" :key="index">
           
            <span :class="num == index? 'active' : ''" @click="foot(index,item)">{{item}}</span>
        </div>


    </div>
    <!-- 使用v-for进行循环渲染 -->
        <div class="serch-text" v-for="item in list" :key="item.id">
            <!-- 跳转到菜谱详情 -->
            <router-link :to="{path:'/Caidetails',query:{id:item.id}}">
            <div class="text-box">
                <div class="text-img">
                    <!-- src 用 ：src=“参数”的形式完成 -->
                    <img :src="item.caiimg" alt="">
                </div>
                <div class="user">
                    <span class="user_title">{{item.cainaem}}</span>
                    <div>
                        <span>{{item.tag}}</span>
                        <br>
                        <span>{{item.rate}}分</span>
                    </div>
                   <div class="user-text">
                        <img :src="item.userimg" alt="">
                        <span>{{item.username}}</span>
                   </div>
                </div>
            </div>
        </router-link>
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import { Toast } from 'vant';

Vue.use(Toast);
import {search} from "../api/index"
export default {
    data(){
        return{
            inp:"",
            list:[],
            topnav:"",
            num:0,
        }
    },
    methods:{
        // async 和 awawit 是进行异步请求的
        async foot(index,item){
            this.num = index
            this.text = item
            let keyword = this.inp
            let secondary_keyword = item
            console.log(keyword,secondary_keyword);
            // 调用 APi接口 并传参进去（keyword,secondary_keyword）是参数
            await search({keyword,secondary_keyword})
            .then(
                Error=>{
                    // 处理数据
                    console.log(Error);
                    let {state, result:{list,secondary_keywords} } =Error
                    console.log(secondary_keywords);
                    this.topnav = secondary_keywords
                    if(state=="success"){
                        let newlist = list.filter(i=>{
                            return i.type==13
                        })
                        let arr = newlist.map(item=>{
                            console.log(item);
                            return {
                                username: item?.r?.a?.n,
                                userimg :item?.r?.a?.p,
                                caiimg: item?.r?.img,
                                cainaem: item?.r?.n,
                                rate:item?.r?.rate,
                                tag:item?.r?.recommendation_tag,
                                id:item?.r?.id,

                            }
                        })
                        console.log(arr);
                        this.list = arr
                    }
                }
            )
        },

       async serchCai(){
           let keyword = this.inp
           if( this.inp===""){
               return Toast({
                   message:'输入框不能为空',
                    position: 'top',
               });
           }
            await search({keyword})
            .then(
                Error=>{
                    console.log(Error);
                    let {state, result:{list,secondary_keywords} } =Error
                    console.log(secondary_keywords);
                    this.topnav = secondary_keywords
                    if(state=="success"){
                        let newlist = list.filter(i=>{
                            return i.type==13
                        })
                        let arr = newlist.map(item=>{
                            console.log(item);
                            return {
                                username: item?.r?.a?.n,
                                userimg :item?.r?.a?.p,
                                caiimg: item?.r?.img,
                                cainaem: item?.r?.n,
                                rate:item?.r?.rate,
                                tag:item?.r?.recommendation_tag,
                                id:item?.r?.id,

                            }
                        })
                        console.log(arr);
                        this.list = arr
                    }
                }
            )
           
        }



    }
}
</script>

<style lang="less" scoped>
.serch-text{
    margin-bottom: 10px;
}
.erji{
    width: 100%;
    height: 20px;
    overflow: auto;
    display: flex;
    margin-bottom: 10px;
      &::-webkit-scrollbar{
            height: 0;
        }
    .er_text{
        .active{
            background-color: rgb(248, 212, 7);
            border-radius:15px ;
            width: 50px;
            height: 100%;
            line-height:23px ;
        }
        border-radius:15px ;
        background-color: #ccc;
        margin: 0 5px;
       display: flex;
       justify-content: center;
       align-items: center;
       height: 20px;
        span{
            display: block;
            text-align: center;
            width: 40px;
            
        }
    }
}
.top_inp{
  border:1px solid rgb(248, 212, 7) ;
  border-radius:30px;
  padding:0 10px;
  width: 70%;
  margin: 10px 5px;
  height: 30px;
}
.text-box{
    display: flex;
    padding: 0 8px;
    .user{
        font-size: 10px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        .user_title{
            span{
                margin-bottom: 8px;
            }
            width: 190px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .user-text{
            margin-top: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        img{
            width: 20px;
            height: 20px;
            border-radius:50% ;
        }
    }
    .text-img{
        margin-right: 15px ;
        img{
           
            width: 150px;
            height: 90px;
            border-radius: 10px;
        }
        
    }
}
</style>